import { Tabs, Space, Button, Typography, Descriptions, Col, Row, Menu, Modal, Form, Input, Upload } from 'antd'
import { useEffect, useState } from 'react';
import {
  FolderOpenOutlined,
  FolderOutlined,
  FolderAddOutlined,
  ImportOutlined,
  PlusSquareOutlined,
} from '@ant-design/icons'
import { ProjectTree } from './project-tree';
import './index.less'
import initGraph from './graph';
import NodeAttr from './node-attr'
import { Sticky, StickyContainer } from 'react-sticky';
import FlowStep from './flow-step'
import FlowBranch from './flow-branch'
import FlowItem from './flow-item'
import ManagerTable from '../config-edit-table/manager-table';
import ConfigAdd from '../config-add/index'

export const FlowDesigner = () => {
  const [graph, setGraph] = useState(null)

  const [currentContent, setCurrentContent] = useState(null)

  const projectClick = (project) => {
    setCurrentContent(project)
  }

  const [newFlowOpen, setNewFlowOpen] = useState(false)
  const [form] = Form.useForm()
  const handleOk = () => {
    setNewFlowOpen(false)
  }
  const handleCancel = () => {
    setNewFlowOpen(false)
  }

  const [newProjectOpen, setNewProjectOpen] = useState(false)
  const [projectForm] = Form.useForm()
  const handleProjectOk = () => {
    setNewProjectOpen(false)
  }
  const handleProjectCancel = () => {
    setNewProjectOpen(false)
  }

  const renderTabBar = (props, DefaultTabBar) => (
    <Sticky bottomOffset={80}>
      {({ style }) => (
        <DefaultTabBar
          {...props}
          className="site-custom-tab-bar"
          style={{
            ...style,
          }}
        />
      )}
    </Sticky>
  );

  const projectItems = [
    {
      key: 'project',
      label: '工程',
      children: [<ProjectTree nodeClick={projectClick} />],
      style: {
        height: '300px'
      }
    }
  ]

  const projectExtraContent = <Space>
    <Button title="创建工程" size='small' type='text' icon={<PlusSquareOutlined/>} onClick={() => setNewProjectOpen(true)}>
    </Button>
    <Upload>
      <Button title='打开工程目录' size='small' type="text" icon={<FolderOpenOutlined />} />
    </Upload>
    <Upload>
      <Button title='关闭工程' size='small' type="text" icon={<FolderOutlined />} />
    </Upload>
    <Button title='增加流程' size='small' type="text" icon={<FolderAddOutlined />} onClick={() => setNewFlowOpen(true)}/>
    <Upload>
      <Button title='导入' size='small' type="text" icon={<ImportOutlined />} />
    </Upload>
  </Space>

  const [contextStyle, setContextStyle] = useState(null)
  const [menuItems, setMenuItems] = useState([
    { label: '设置常用', key: 'item-1' },
    { label: '编辑', key: 'item-2' },
  ])

  const hanldeOpenContext = (event) => {
    setContextStyle({
      top: event.clientY,
      left: event.clientX,
    })
  }

  const comItems = [
    {
      key: '1',
      label: '流程步',
      children: [<FlowStep graph={graph} openMenu={hanldeOpenContext} />],
    },
    {
      key: '2',
      label: '分支',
      children: [<FlowBranch graph={graph} openMenu={hanldeOpenContext} />],
    },
    {
      key: '3',
      label: '流程项',
      children: [<FlowItem graph={graph} openMenu={hanldeOpenContext} />]
    }
  ]

  const nodeClick = (event) => {
    console.log(event)
  }

  useEffect(() => {
    let tempGraph = initGraph({
      container: document.getElementById('graph-container'),
      nodeClick
    })
    setGraph(tempGraph)
  }, [])

  return <>
    <div className='designer-layout'>
      <div className='layout-left'>
        <StickyContainer>
          <Tabs className='cus-tabs' defaultActiveKey="1" size='small' tabBarExtraContent={projectExtraContent} renderTabBar={renderTabBar} items={projectItems} />
        </StickyContainer>
        <StickyContainer className='flex-tabs'>
          <Tabs destroyInactiveTabPane={true} defaultActiveKey="1" size='small' renderTabBar={renderTabBar} items={comItems} />
        </StickyContainer>
      </div>
      <div className='layout-center'>
        <div id="graph-container" style={{ opacity: (currentContent && currentContent.type != 'dataConfig') ? 1 : 0 }}>

        </div>
        {
          (currentContent && currentContent.type == 'dataConfig') && <div className='center-content'>
            {/* <Typography.Title>{currentContent.name}管理器</Typography.Title> */}
            <Row>
              <Col span={12}>
                <div className='center-title'>{currentContent.name}管理器</div>
              </Col>
              <Col span={12} style={{ textAlign: 'right' }}>
                <ConfigAdd config={currentContent} />
              </Col>
            </Row>

            <div className='center-table'>
              <div>
                <ManagerTable config={currentContent} />
              </div>
            </div>
          </div>
        }
      </div>
      
      {
        (currentContent && currentContent.type == 'flowConfig') && <div className='layout-right'>
          <div className='pannel-title'>
            信息
          </div>
          <Descriptions column={1} style={{ marginTop: '10px' }}>
            <Descriptions.Item label="节点名称">1810000000</Descriptions.Item>
            <Descriptions.Item label="类型">XXXXXX</Descriptions.Item>
            <Descriptions.Item label="编号">xxxxx</Descriptions.Item>
          </Descriptions>
          <div className='pannel-title'>
            属性
          </div>
          <div className='pannel-content flex-1'>
            <NodeAttr />
          </div>
        </div>
      }
    </div >
    {
        contextStyle && <div className='context-menu' style={contextStyle}>
        <Menu items={menuItems} onClick={() => setContextStyle(null)} />
      </div>
    }
    <Modal
        centered
        width={400}
        title='新建流程'
        open={newFlowOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form form={form}>
          <Form.Item label="流程名称" name="name">
            <Input autoComplete='off'/>
          </Form.Item>
        </Form>
    </Modal>

    <Modal
        centered
        width={400}
        title='新建工程'
        open={newProjectOpen}
        onOk={handleProjectOk}
        onCancel={handleProjectCancel}
      >
        <Form form={projectForm}>
          <Form.Item label="工程名称" name="name">
            <Input placeholder='请输入工程名称' autoComplete='off'/>
          </Form.Item>
        </Form>
    </Modal>
  </>
}

export default FlowDesigner